<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="教职工"  name="first" :key="'first'">
        <div v-if="isFirst" style="margin-bottom:20px">
          <el-table
            v-loading="loading"
            :data="teacherList"
          >
            <el-table-column label="列表" align="center">
              <template slot-scope="scope">
                {{scope.$index+1}}
              </template>
            </el-table-column>
            <el-table-column label="姓名" align="center" prop="teacherName" />
            <el-table-column label="联系电话" align="center" prop="teacherPhone">
              <template slot-scope="scope">
                {{ scope.row.teacherPhone }}
                <img style="width:16px" src="@/assets/logo/eye.png" @click="seeTeacherPhone(scope.row)" alt="" v-if="scope.row.teacherPhone">
              </template>
            </el-table-column>
            <el-table-column label="邮箱" align="center" prop="teacherEmail" />
          </el-table>
          <pagination
            v-show="teacherTotal>0"
            :total="teacherTotal"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getTeacherList"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="家长" name="second" :key="'second'">
        <div v-if="isSecond" style="margin-bottom:20px">
          <el-table
            v-loading="loading"
            :data="parentsList"
          >
            <el-table-column label="幼儿姓名" prop="stuName" align="center"/>
            <el-table-column label="爸爸" align="center" prop="fatherName" />
            <el-table-column label="爸爸联系电话" align="center" prop="fatherPhone">
              <template slot-scope="scope">
                {{ scope.row.fatherPhone }}
                <img style="width:16px" src="@/assets/logo/eye.png" @click="seeParentPhone(scope.row,'1')" alt="" v-if="scope.row.fatherPhone">
              </template>
            </el-table-column>
            <el-table-column label="妈妈" align="center" prop="motherName" />
            <el-table-column label="妈妈联系电话" align="center" prop="motherPhone">
              <template slot-scope="scope">
                {{ scope.row.motherPhone }}
                <img style="width:16px" src="@/assets/logo/eye.png" @click="seeParentPhone(scope.row,'2')" alt="" v-if="scope.row.motherPhone">
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="parentTotal>0"
            :total="parentTotal"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getParentsList"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {getTeacherAddressBook,getParentsAddressBook,seeParentPhone,seeTeacherPhone,} from "@/api/evaluate/evalNorm";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "EvalNorm",
  components: {
    Treeselect
  },
  data() {
    return {
      // 默认第一个Tab
      activeName: 'first',
      isFirst: true,
      isSecond: false,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      teacherList:[],
      parentsList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        schoolCode:this.$store.getters.schoolCode,
      },
      parentTotal:0,
      teacherTotal:0,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        pid: [
          { required: true, message: "上级不能为空", trigger: "blur" }
        ],
        title: [
          { required: true, message: "指标名称不能为空", trigger: "blur" }
        ],
        listSort: [
          { required: true, message: "排序不能为空", trigger: "blur" }
        ],
        score: [
          { required: true, message: "分数不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getTeacherList()
  },
  methods: {
      // 查看老师联系电话
      async seeTeacherPhone(row){
          try {
          this.loading = true;
          let params = {
            teacherId:row.teacherId,
            teacherPhoneType: row.teacherPhoneType
          }
          const data = await seeTeacherPhone(params)
          row.teacherPhoneType == 0 ? row.teacherPhoneType = 1 : row.teacherPhoneType = 0
          row.teacherPhone = data.teacherPhone
          this.loading = false;
        } catch (e) {
          console.log(e)
        }
      },
      // 查看家长联系电话
      async seeParentPhone(row,type){
          try {
          this.loading = true;
          let params = {
            stuId:row.stuId,
          }
          type == 1?params.fatherPhoneType = row.fatherPhoneType:params.matherPhoneType = row.matherPhoneType
          const data = await seeParentPhone(params)
          if(type == 1){
            row.fatherPhoneType == 0 ? row.fatherPhoneType = 1 : row.fatherPhoneType = 0
            row.fatherPhone = data.fatherPhone
          }else {
            row.matherPhoneType == 0 ? row.matherPhoneType = 1 : row.matherPhoneType = 0
            row.motherPhone = data.motherPhone
          }
          this.loading = false;
        } catch (e) {
          console.log(e)
        }
      },

     handleClick(tab) {
      if (tab.name === 'first') {
        this.isFirst = true
        this.isSecond = false
        this.queryParams.pageNum = 1
        this.getTeacherList()
      } else if (tab.name === 'second') {
        this.isFirst = false
        this.isSecond = true
        this.queryParams.pageNum = 1
        this.getParentsList()
      }
    },
    // 获取教师通讯录getTeacherAddressBook
    getTeacherList() {
      this.loading = true;
      getTeacherAddressBook(this.queryParams).then(response => {
        if(response.code == 200){
          this.teacherList = response.rows
          this.teacherTotal = response.total;
        }
        this.loading = false;
      });
    },
    // 获取家长通讯录getParentsAddressBook
    getParentsList() {
      this.loading = true;
      getParentsAddressBook(this.queryParams).then(response => {
        if(response.code == 200){
          this.parentsList = response.rows
          this.parentTotal = response.total;
        }
        this.loading = false;
      });
    }
  }
};
</script>
